import React, {useState, useRef, useEffect} from 'react';
import {connect} from 'react-redux';
import MiniPlayer from "./MiniPlayer";
import NormalPlayer from './NormalPlayer';
import {getSongUrl} from '../../api/utils';
import {isEmptyObject} from "../../api/utils";
import {
    changePlayingState,
    changeShowPlayList,
    changeCurrentIndex,
    changeCurrentSong,
    changePlayList,
    changePlayMode,
    changeFullScreen
} from "./store/actionCreators";
// mock
const hotSongs = JSON.parse(localStorage.getItem('hotSongs'));

const Player = (props) => {
    // useState
    // 目前播放时间
    const [currentTime, setCurrentTime] = useState(0);
    // 歌曲时长
    const [duration, setDuration] = useState(0);
    // 歌曲进度 列: 0.5
    let percent = isNaN(currentTime / duration) ? 0 : currentTime / duration;
    // Data
    const {
        fullScreen, // 播放器是否为全屏模式
        playing, // 当前歌曲是否播放
        showPlayList,// 是否展示播放列表
        mode, // 播放模式
        currentIndex, // 当前歌曲在播放列表的索引位置
        playList, // 播放列表
        sequencePlayList, // 顺序列表 (因为之后会有随机模式
        currentSong: immutableCurrentSong
    } = props;
    const {toggleFullScreenDispatch, togglePlayingDispatch, changeCurrentIndexDispatch, changeCurrentDispatch} = props;
    // 当前歌曲信息
    let currentSong = immutableCurrentSong.toJS();

    // ref
    const audioRef = useRef();
    // 暂停或者播放
    const clickPlaying = (e, state) => {
        e.stopPropagation();
        togglePlayingDispatch(state);
    };
    // 报错
    useEffect(() => {
        if (!currentSong) return;
        changeCurrentIndexDispatch(0); // 默认负一、临时0
        let current = hotSongs[0]; // 播放数组第一个
        changeCurrentDispatch(current); // 赋值currentSon为歌曲Obj
        // 加载
        audioRef.current.src = getSongUrl;

    }, []);
    // useEffect(() => {
    //     playing ? audioRef.current.play() : audioRef.current.pause();
    // }, [playing]);
    return (
        <div>
            {
                isEmptyObject(currentSong) ?
                    null
                    :
                    <MiniPlayer
                        song={currentSong}
                        playing={playing}
                        fullScreen={fullScreen}
                        toggleFullScreenDispatch={toggleFullScreenDispatch}
                        clickPlaying={clickPlaying}
                    />
            }
            {
                isEmptyObject(currentSong) ?
                    null
                    :
                    <NormalPlayer
                        song={currentSong}
                        fullScreen={fullScreen}
                        playing={playing}
                        toggleFullScreen={toggleFullScreenDispatch}
                        clickPlaying={clickPlaying}
                    />
            }
            <audio ref={audioRef} />
        </div>
    )
};
const mapStateToProps = (state) => {
    return {
        fullScreen: state.player.get('fullScreen'),
        playing: state.player.get('playing'),
        currentSong: state.player.get('currentSong'),
        showPlayList: state.player.get('showPlayList'),
        mode: state.player.get('mode'),
        currentIndex: state.player.get('currentIndex'),
        playList: state.player.get('playList'),
        sequencePlayList: state.player.get('sequencePlayList')
    }
};
const mapDispatchToProps = (dispatch) => {
    return {
        togglePlayingDispatch(data) {
            dispatch(changePlayingState(data));
        },
        toggleFullScreenDispatch(data) {
            dispatch(changeFullScreen(data));
        },
        togglePlayListDispatch(data) {
            dispatch(changeShowPlayList(data));
        },
        changeCurrentIndexDispatch(index) {
            dispatch(changeCurrentIndex(index));
        },
        changeCurrentDispatch(data) {
            dispatch(changeCurrentSong(data));
        },
        changeModeDispatch(data) {
            dispatch(changePlayMode(data));
        },
        changePlayListDispatch(data) {
            dispatch(changePlayList(data));
        }
    };
};
export default connect(mapStateToProps, mapDispatchToProps)(React.memo(Player));